import React, { memo, useEffect } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { getTabsRequest } from "./store/actionCreators";

import { RankingWrapper, ContentLeft, ContentRight } from "./style";
import RankingTabs from "./child/ranking-tabs";
import RankingHeader from "./child/ranking-header";
import RankingList from "./child/ranking-list";

const DisRanking = memo(() => {
  const dispatch = useDispatch();
  const { listInfo } = useSelector(state => ({
    listInfo: state.getIn(["ranking", "listInfo"])
  }), shallowEqual)

  useEffect(() => {
    dispatch(getTabsRequest())
  });

  return (
    <RankingWrapper className="wrap-v2">
      <ContentLeft>
        <RankingTabs />
      </ContentLeft>

      {Object.keys(listInfo).length > 0 && 
        <ContentRight>
          <RankingHeader />
          <RankingList />
        </ContentRight>
      }
    </RankingWrapper>
  )
})

export default DisRanking